<template>
<q-avatar :size="size" @click="click">
  <template v-if="user.head === ''">
    <q-btn unelevated round color="brown-5" :label="user.name.slice(-2)"/>
  </template>
  <template v-else>
    <q-btn unelevated round color="brown-5">
        <q-img ratio="1" :size="size" fit="fill" :src='imgBase + user.head'/>
    </q-btn>
  </template>
</q-avatar>
</template>

<script>
export default {
  name: 'AutoHead',
  props: {
    user: {
      type: Object,
      required: true
    },
    click: {
      type: Function,
      required: false
    },
    imgBase: {
      type: String,
      required: false,
      default: ''
    },
    size: {
      type: String,
      required: false,
      default: '42px'
    }
  }
}
</script>
